<template>
  <div class="ind-footer">
    <!-- 版心 -->
    <div class="center">
      <div class="bottom">
        <!-- 横线上方 -->
        <div class="bot-top">
          <!-- 左侧 -->
          <div class="bot-left">
            <ul class="bot-left-ul">
              <li>企业动态</li>
              <li>
                <a href="#">品牌介绍</a>
              </li>
              <li>
                <a href="#">新闻资讯</a>
              </li>
            </ul>
            <ul class="bot-left-ul">
              <li>关于我们</li>
              <li>
                <a href="#">品牌故事</a>
              </li>
              <li>
                <a href="#">医院点滴</a>
              </li>
              <li>
                <a href="#">公益之路</a>
              </li>
            </ul>
            <ul class="bot-left-ul">
              <li>联系我们</li>
              <li>
                <a href="#">企业部门</a>
              </li>
              <li>
                <a href="#">门店展示</a>
              </li>
            </ul>
            <ul class="bot-left-ul">
              <li>站点相关信息</li>
              <li>
                <a href="#">核心业务</a>
              </li>
              <li>
                <a href="#">养宠俱乐部</a>
              </li>
              <li>
                <a href="#">站点地图</a>
              </li>
            </ul>
          </div>
          <!-- 中间 -->
          <div class="bot-center">
            <div id="call">
              <img class="imgs" src="../assets/phone.png" />
              <p id="relative">联系我们</p>
            </div>
            <p>400-400-400</p>
          </div>
          <!-- 右侧 -->
          <div class="bot-right">
            <div>
              <a href="#">
                <img class="imgs" src="../assets/wechat.png" />
                <span>官方微信</span>
              </a>
            </div>
            <div>
              <a href="#">
                <img class="imgs" src="../assets/weibo.png" />
                <span>官方微博</span>
              </a>
            </div>
          </div>
        </div>
        <!-- 横线下方 -->
        <div class="bot-bottom" style="border-top: 1px solid white">
          <p>Copyright ©2019 - 2022 百脑汇科技宠物医疗集团有限公司</p>
          <a href="">粤ICP备WEB202204号</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  font-size: 20px;
  color: white;
}
#call {
  user-select: none;
  cursor: pointer;
}
.imgs {
  width: 60px;
}
#relative {
  margin-top: 8px;
  font-size: 20px;
}
.bot-top {
  margin: 0 auto;
  color: white;
  width: 1440px;
  height: 295px;
  display: flex;
  justify-content: space-between;
}
.center {
  background-color: #414b57;
}
.bot-left {
  margin-left: 7px;
  > .bot-left-ul {
    vertical-align: top;
    list-style-type: none;
    display: inline-block;
    text-align: left;
    margin: 20px;
    padding-left: 15px;
    > :first-child {
      font-size: 25px;
      font-weight: bold;
    }
    > :nth-child(n) {
      margin: 30px 0px;
    }
  }
}

.bot-center {
  text-align: center;
  > :first-child {
    margin-top: 60px;
  }
  > p {
    margin-top: 20px;
    font-size: 40px;
  }
}
.bot-right > div > a {
  padding: 60px 50px 0 0;
  display: flex;
  align-items: center;
  > span {
    margin-left: 23px;
    font-size: 16px;
  }
}
.bot-bottom {
  margin: 0 auto;
  width: 1400px;
  text-align: center;
  padding-bottom: 17px;
  > :first-child {
    margin: 40px auto 0;
    color: white;
  }
  > :last-child {
    display: block;
    margin: 9px auto 0px;
    font-size: 14px;
  }
}
</style>
